<template>
    <div class="bar-y" ref="bar-y"></div>
</template>

<script>
import * as echarts from 'echarts';
import http from '@/http';

let currentIndex = 0;
export default {
    data() {
        return {
            chartBarY: null,
            resultArr: [],
            names: [],
            values: [],
            option: {
                title: {
                    text: '▎商家销售统计',
                    textStyle: {
                        color: 'white',
                        fontSize: 14
                    },
                    left: '5%',
                    top: '5%'
                },
                textStyle: {
                    color: '#aaa'
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        show: false
                    }
                },
                series: {
                    data: [],
                    itemStyle: {
                        borderRadius: [0, 20, 20, 0]
                    },
                    type: 'bar',
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, // 渐变方向 (x0, y0, x1, y1)
                        [
                            { offset: 0, color: '#5553EE' }, // 0% 处的颜色
                            { offset: 1, color: '#A46CE6' } // 100% 处的颜色
                        ]
                    ),
                    label: {
                        show: true,
                        position: 'right',
                        color: 'white'
                    }
                },
                grid: {
                    top: '20%',
                    right: '8%',
                    bottom: '3%',
                    left: 20,
                    containLabel: true // 确保坐标轴标签包含在内
                },
                barWidth: '50%',
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,.5)',
                    textStyle: {
                        color: 'white'
                    }
                }
            }
        }
    },
    methods: {
        async getData() {
            let ret = await http.get('/seller.json')
            // console.log(ret);
            let sorted = ret.sort((a, b) => a.value - b.value)
            this.names = sorted.map(item => item.name)
            this.values = sorted.map(item => item.value)
            // console.log(this.names, this.values);
            this.option.yAxis.data = this.processArr(this.names)
            this.option.series.data = this.processArr(this.values)
            this.chartBarY.setOption(this.option)
            this.startProcess()
        },
        processArr(arr) {
            let batch = [];
            let remainingElements = arr.length - currentIndex;

            if (remainingElements >= 5) {
                batch = arr.slice(currentIndex, currentIndex + 5);
                currentIndex += 5;
            } else {
                batch = arr.slice(currentIndex);
                const needed = 5 - remainingElements;
                batch = batch.concat(arr.slice(0, needed));
                currentIndex = needed;
            }


            this.resultArr = batch
            return this.resultArr
        },
        startProcess() {
            setInterval(() => {
                this.option.yAxis.data = this.processArr(this.names)
                this.option.series.data = this.processArr(this.values)
                this.chartBarY.setOption(this.option)
            }, 3000)
        }
    },
    mounted() {
        this.chartBarY = echarts.init(this.$refs['bar-y'])
        this.getData()
        window.addEventListener('resize', () => {
            this.chartBarY.resize()
        })
    }
}
</script>

<style lang="scss" scoped>
.bar-y {
    height: 100%;
}
</style>